<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑角色</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
    <link rel="stylesheet" th:href="@{/src/zTree_v3/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>
<form class="layui-form" style="width:80%;" id="arf">
    <!-- 权限提交隐藏域 -->
    <input type="hidden" id="menuId" name="menuId"/>
    <input type="hidden" id="roleId" name="roleId" th:value="${roles.roleId}"/>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" class="layui-input userName" lay-verify="required"
                   placeholder="请输入角色名" name="roleName" th:value="${roles.roleName}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入角色描述" class="layui-textarea linksDesc" lay-verify="required"
                      name="roleRemark" >[[${roles.roleRemark}]]</textarea>
        </div>
    </div>
    <!--权限树xtree  -->
    <div class="layui-form-item">
        <label class="layui-form-label">分配权限：</label>
        <ul id="xtree" class="ztree" style="width:200px;margin-left: 105px"></ul>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="button" class="layui-btn" lay-submit="" lay-filter="editRole" value="立即提交"/>
        </div>
    </div>
</form>
<script th:src="@{/src/layui.js}"></script>
<script th:src="@{/src/jquery-1.9.1.min.js}"></script>
<script th:src="@{/src/zTree_v3/js/jquery.ztree.all.js}"></script>
    <script type="text/javascript" th:inline="javascript">

        layui.use(['form','layer'],function () {
            var form = layui.form,
                layer = layui.layer;

            form.on('submit(editRole)',function (data) {
                //获取被选中的节点数据
                var tree = $.fn.zTree.getZTreeObj("xtree");
                var nodes = tree.getCheckedNodes(true);
                var keys = "";
                $.each(nodes,function (index,obj) {
                    keys += obj.menuId+",";
                })
                keys = keys.substring(0,keys.length-1);
                $("#menuId").val(keys);

                $.ajax({
                    type:'put',
                    url:'/roles/updateRole',
                    data:$("#arf").serialize(), //roleId=1&roleName=aaaa
                    dataType:'json',
                    success:function (res) {
                        if(res.code == 200){
                            layer.msg('更新成功',{icon:1},function () {
                                top.layer.closeAll("iframe");
                                parent.location.reload();
                            })
                        }else{
                            layer.msg(res.message,{icon:5});
                        }
                    }
                })
            })
        })



        var roleId = [[${roles.roleId}]];

        //加载权限数据
        $(function () {

             var setting = {
                 data:{
                     simpleData:{
                         enable:true,
                         idKey:'menuId',
                         pIdKey:'parentId'
                     },
                     key:{
                         title:'title',
                         name:'title'
                     }

                 },
                 check:{
                     enable:true,
                 },
                 view:{
                     showIcon:false
                 }

             }

            $.ajax({
                url:'/menu/loadCheckedTree/'+roleId,
                type:'get',
                dataType:'json',
                success:function (res) {
                    $.fn.zTree.init($("#xtree"),setting,res);
                }

            })
        })













    </script>






</body>
</html>